<template>
    <div class="my-article">
        <!-- 导航栏 -->
        <van-nav-bar left-arrow @click-left="$router.back()" />

        <!-- 标签页 -->
        <van-tabs
            v-model="active"
            class="tabs-wrap"
            border
            title-active-color="#3296FA"
            color="#399afa"
            line-width="90px"
        >
            <!-- 收藏 / 历史 -->
            <van-tab
                :title="item.title"
                v-for="(item, index) in tabs"
                :key="index"
            >
                <my-list :fn="item.fn" v-slot="{ item }" />
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import MyList from './components/my-list'
import { getUserCollect, getUserHistory } from '@/api/user'

export default {
    name: 'MyArticle',
    components: {
        MyList
    },
    props: {
        type: String
    },
    data () {
        return {
            active: this.getActive(),
            tabs: [{ title: '收藏', fn: getUserCollect }, { title: '历史', fn: getUserHistory }]
        }
    },
    created () { },
    mounted () { },
    methods: {
        getActive () {
            // const active = ['collect', 'history', undefined].indexOf(this.type)
            // return active !== -1 ? active : 0
            const index = ['collect', 'history'].indexOf(this.type)
            return index
        }
    },
    computed: {},
    watch: {}
}
</script>

<style scoped>
</style>
